<template>
  <div class="card-detail-wrapper same-change-oldstyle">
    <div class="card-detail-top saem-seat-box">
      <div class="saem-seat-left">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>当前位置:</el-breadcrumb-item>
        <el-breadcrumb-item>水卡管理</el-breadcrumb-item>
        <el-breadcrumb-item to="/virtualCardList">我的水卡</el-breadcrumb-item>
        <el-breadcrumb-item>水卡详情</el-breadcrumb-item>
      </el-breadcrumb>
      </div>
      <div class="saem-seat-right">
          <button class="same-search-btns same-search-export" @click="RefreshFun">
            刷新
          </button>
          <button class="same-search-btns" @click="returnBack">返回</button>
        </div>
    </div>

    <div class="card-info">
      <div class="card-title">
        <el-icon class="el-icon-postcard" size="23"></el-icon>
        <span>水卡信息</span>
      </div>
      <div class="card-details">
        <span>姓名：{{card.full_name || '--'}}</span>
        <span>手机号码：{{card.tel || '--'}}</span>
        <span>实体卡卡号：{{card.card || '--'}}</span>
        <span>电子卡卡号：{{card.electronics_card || '--'}}</span>
        <span>水卡类型：{{card.card_type_name || '--'}}</span>
        <span>水卡余额：{{card.balance || '--'}}</span>
        <span>水卡状态：<template v-if="card.card_status==1">正常</template><template
            v-if="card.card_status==2">注销</template><template v-if="card.card_status==3">挂失</template></span>
        <span>申请时间：{{card.time || '--'}}</span>
        <span>园区-地址：{{card.village_name || '--'}}-{{card.card_address || '--'}}</span>
      </div>
    </div>

    <div class="card-change">
      <div class="card-title">
        <el-icon class="el-icon-edit" size="23"></el-icon>
        <span>水卡操作记录</span>
      </div>
      <div class="change-record">
        <el-table :data="tableData" header-row-class-name="record-header-cell">
          <el-table-column prop="type_name" label="类型">
          </el-table-column>
          <el-table-column prop="card_num" label="卡号">
          </el-table-column>
          <el-table-column prop="account_name" label="操作人">
          </el-table-column>
          <el-table-column prop="add_time" label="时间">
          </el-table-column>
          <template slot="empty">
            <div class="new-no-data-show">
              <img src="../../assets/images/no-data.png" alt="" />
              <div>暂无相关数据</div>
            </div>
          </template>
        </el-table>

        <div class="same-page-inShow" v-if="tableData.length">
          <el-pagination background  class="pull-right clearfix" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :current-page.sync="pageNo" :page-sizes="pageSizesList"
            :page-size="pageSize" layout="total, prev, pager, next, jumper, sizes" :total="totalDataNumber">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: "cardDetails",
    data() {
      return {
        card: {},
        water_id: "",//水卡id
        tableData: [],
        pageNo: 1,
        pageSize: 15,
        pageSizesList: [15, 30, 40, 50],
        tableData: [], //返回的结果集合
        totalDataNumber: 0, //数据的总数,
      }
    },
    created: function () {
      this.water_id = this.$route.query.water_id;
    },

    mounted: function () {
      this.getMoneyChangeRecord();
      this.getCard();
    },
    inject: ["reload"],
    methods: {
      RefreshFun() {
        // 调用reload方法，刷新整个页面
        this.reload();
      },
      //返回
      returnBack() {
        this.$router.back(-1);
      },

      //获取水卡数据
      getCard() {
        this.$post({
          url: "Partner/WaterCard/getWaterCard",
          data: {
            id: this.water_id
          },
          success: res => {
            if (res.code > 0) {
              this.card = res.data;
            } else {
              this.$message.error(res.message);
            }
          }, error: e => {
            this.$message.error('网络错误');
          }
        })
      },

      handleSizeChange(value) {
        this.pageSize = value;
        this.pageNo = 1;
        this.getMoneyChangeRecord();
      },
      handleCurrentChange(value) {
        this.pageNo = value;
        this.getMoneyChangeRecord();
      },
      //获取水卡金额变动记录
      getMoneyChangeRecord() {
        this.$post({
          url: "Partner/WaterCard/card_operation",
          data: {
            page: this.pageNo,
            pageSize: this.pageSize,
            water_id: this.water_id,
          }, success: res => {
            if (res.code == 1000) {
              const source = res.data;
              this.tableData = source.data;
              this.totalDataNumber = Number.parseInt(source.count);
            }
          }, error: e => {
            this.$message.error('网络错误');
          }
        })
      }
    },
  }
</script>
<style scoped>
  .card-detail-wrapper {
    position: absolute;
    background: #FAFAFA;
    right: 0;
    left: 0;
    bottom: 0;
    top: 0;
  }

  .card-detail-top {
    height: 73px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 24px;
    position: relative;
    background: #fff;
  }

  .card-detail-top::after {
    content: "";
    width: 98%;
    height: 1px;
    border-bottom: 1px solid #CDCECE;
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
  }

  .card-info {
    margin-top: 12px;
    background: #fff;
    box-sizing: border-box;
  }

  .card-title {
    padding: 16px 16px 8px 16px;
    position: relative;
    color: #2D5686;
  }

  .card-title::after {
    position: absolute;
    content: "";
    border-bottom: 1px dotted #F3F3F3;
    bottom: 0;
    width: 95%;
    left: 50%;
    transform: translateX(-50%);
  }

  .card-details {
    display: flex;
    flex-wrap: wrap;
    padding: 13px 30px 30px;
    color: #4D4D4D;
    font-size: 13px;
  }

  .card-details span {
    display: inline-block;
    width: 25%;
    margin-top: 17px;
  }

  .card-details span:last-child {
    width: auto;
  }

  .card-change {
    margin-top: 12px;
    background: #fff;
    box-sizing: border-box;
  }

  .change-record {
    width: 95%;
    margin: 10px auto 0;
    padding-bottom: 20px;
  }

  .same-page-inShow {
    padding-top: 10px;
    text-align: center;
  }
  .new-no-data-show{
    padding-top: 50px;
  }
</style>
<style>
  .record-header-cell {
    color: #333333;
    background-color: crimson !important;
  }

  .record-header-cell th {
    background-color: #F5F5F0;
  }
</style>